<template>
    <el-checkbox-group v-model="modelValue" @change="onChange" :disabled="props.disabled || props.readonly">
        <el-checkbox
            v-for="item in props.items"
            :value="item.value"
            :label="item.label"
            :disabled="props.disabled || props.readonly"
        />
    </el-checkbox-group>
</template>

<script setup lang="ts">
import {ElCheckboxGroup, ElCheckbox} from 'element-plus';
import {defineModel, defineProps} from 'vue';

const modelValue = defineModel({
    type: Array<string>,
    default: () => []
});

const emits = defineEmits(['change']);
const props = defineProps({
    items: {
        type: Array<{value: string; label: string}>,
        default: () => []
    },
    disabled: Boolean,
    readonly: Boolean
});

const onChange = (value) => {
    modelValue.value = value;
    emits('change', value);
};
</script>
